.box {
    overflow: auto;
    height: 100%;
    // padding: 24px;
    display: flex;
    justify-content: flex-end;
    flex-flow: wrap;
    background-color: rgb(124, 7, 66);
    padding: 36px;

    .mask {
        position: fixed;
        left: 350px;
        top: 150px;
        width: 200px;
        height: 200px;
        border-radius: 200px;
        box-shadow: 0px 0px 56px 5px #000 inset;
        z-index: 100;
        pointer-events: none;
    }

    .maskouter {
        position: fixed;
        left: 350px;
        top: 150px;
        width: 200px;
        height: 200px;
        border-radius: 200px;
        box-shadow: 0px 0px 56px 10px #000;
        z-index: 100;
        pointer-events: none;
    }

    .clickbox {
        position: relative;
        z-index: 50;
        margin: 200px 0;
        margin-left: -700px;
    }

    .click {
        // width: 100px;
        padding: 0 24px;
        margin: 12px;
        height: 36px;
        border: 1px solid #fff;
        line-height: 36px;
        color: azure;
    }

    .halfImg {
        width: 240px;
        height: 240px;
        border: 2px solid #999;
        margin-top: 36px;
        margin-right: 200px;
        background: 0 0 no-repeat;
        background-size: 240px 480px;
        background-image: url(../../assets/images/img1.png);
        box-shadow: 0px 10px 56px 5px;
    }

    .moveBox {
        width: 300px;
        height: 240px;
        margin: 20px auto;
        overflow: hidden;
        border: 2px #ebebeb solid;
        position: relative;

        .moveItem {
            width: 600px;
            position: absolute;
            top: 0;
            left: 0;
            user-select: none; //文本不能选中
            // height: 400px;
            line-height: 36px;
            padding: 12px;
            background: linear-gradient(to top right, #04f324, #f7f702);
            cursor: all-scroll;

            img {
                width: 600px;
            }
        }
    }
}